<template>
	<div class="systemPage-wrapper">
		<div class="topbar">
			<span v-if="activeOrganization" class="icon iconfont iconxitongpingtai-zuzhiquanxianzhongxin-zuzhijigouguanli"></span>
			<span v-if="activeAutManage" class="icon iconfont iconxitongpingtai-zuzhiquanxianzhongxin-quanxianguanli"></span>
			<span v-if="activeMultiRoles" class="icon iconfont iconxitongpingtai-zuzhiquanxianzhongxin-yirenduogang"></span>
			<span v-if="activeWorkDeliver" class="icon iconfont icongongzuoyijiao-tuihui"></span>
			<span>组织权限中心</span>
			<div class="tabs">
				<span :class="activeOrganization ? 'active' : ''" @click="toOrganization">组织机构</span>
				<span :class="activeAutManage ? 'active' : ''" @click="toAutManage">权限管理</span>
				<span :class="activeWorkDeliver ? 'active' : ''" @click="toWorkDeliver">工作移交</span>
				<span :class="activeMultiRoles ? 'active' : ''" @click="toMultiRoles">一人多岗</span>
			</div>
		</div>
		<div class="content-background">
			<organization-content v-if="activeOrganization"></organization-content>
			<multi-roles v-if="activeMultiRoles"></multi-roles>
			<aut-manage v-if="activeAutManage"></aut-manage>
			<work-deliver v-if="activeWorkDeliver"></work-deliver>
		</div>
	</div>
</template>

<script>
	import OrganizationContent from './organization'
	import MultiRoles from './multiRoles'
	import AutManage from './autManage'
	import WorkDeliver from './workDeliver'

	export default {
		name: 'organization',
		data() {
			return {
				activeOrganization: true,
				activeAutManage: false,
				activeWorkDeliver: false,
				activeMultiRoles: false,
			}
		},
		components: {
			OrganizationContent,
			MultiRoles,
			AutManage,
			WorkDeliver,
		},
		methods: {
			// 切换 Tab
			toOrganization() {
				this.tabInitialization()
				this.activeOrganization = true
			},
			toAutManage() {
				this.tabInitialization()
				this.activeAutManage = true
			},
			toWorkDeliver() {
				this.tabInitialization()
				this.activeWorkDeliver = true
			},
			toMultiRoles() {
				this.tabInitialization()
				this.activeMultiRoles = true
			},
			tabInitialization() {
				this.activeOrganization = false
				this.activeAutManage = false
				this.activeWorkDeliver = false
				this.activeMultiRoles = false
			},
		},
	}
</script>

<style lang="scss" scoped>
	.systemPage-wrapper {
		display: flex;
		flex-direction: column;
		.topbar {
			position: relative;
			.tabs {
				position: absolute;
				right: 0px;
				text-align: center;
				span {
					width: 96px;
					height: 32px;
					line-height: 32px;
					border-radius: 4px;
					display: inline-block;
					margin-right: 12px;
					border: 1px solid rgba(83, 167, 255, 1);
					font-size: 14px;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: var(--organization-tabs-text-color);
					cursor: pointer;
					&:hover,
					&.active {
						background: rgba(81, 167, 253, 1);
						box-shadow: 0px 3px 6px 0px rgba(0, 57, 151, 0.1);
						font-weight: bold;
						color: rgba(255, 255, 255, 1);
					}
					&:hover {
						opacity: 0.6;
					}
					&:active {
						opacity: 1;
					}
				}
			}
		}
	}
</style>
